<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>上传图片</title>
		<link rel="stylesheet" th:href="@{/assets/libs/iconfont/iconfont.css}" />
		<style>
			body{max-width:500px;margin:8px auto;}
			dl{list-style:none;position:relative;}
			dt{position:absolute;width:45px;}
			dd{margin:0 0 0 45px;}
			.upload-inputs{width:100%;margin:0 0 8px 0;}
			.upload-inputs #filePicker{float:left;width:43px;height:43px;text-align:center;position:relative;
				line-height:45px;font-size:32px;background:#f0f0f0;cursor:pointer;border:1px solid #dce3e8;}
			.upload-inputs #filePicker:hover{background:#f8f8f8;}
			.webuploader-pick{width:100%;height:100%;padding:0;position:absolute;left:0;top:0;}
			.webuploader-element-invisible{display:none;}
			.progress{width:100%;height:45px;background:white;border:solid 1px #dce3e8;padding:8px;box-sizing:border-box;position:relative;}
			.progress span{display:block;height:100%;width:0;background:#eeeeee;}
			.progress .tips{position:absolute;width:100%;line-height:27px;text-align:center;font-size:12px;}
			.alert{background-color: rgba(232,76,61,0.1);color: #d82a1a;padding: 15px;
				border: 1px solid rgba(232,76,61,0.15);border-radius: 4px;line-height: 2;}
			.btn{display:block;width:45%;float:left;line-height:45px;box-sizing:border-box;text-align:center;border:solid 1px #eaeaea;color:#666;}
			.btn:hover{background:#fafafa;cursor:pointer;}
		</style>
	</head>
	<body>
		<div class="alert">
			本地图片仅支持JPG、GIF、PNG格式
		</div>
		<br>
		<dl class="upload-inputs">
			<dt>
				<i id="filePicker" class="iconfont icon-picture"></i>
			</dt>
			<dd>
				<div class="progress">
					<div class="tips">点击左侧按钮上传</div>
					<span></span>
				</div>
			</dd>
		</dl>
		<br>
		<a class="btn btn-select" style="margin-right:10%;">确认选择</a>
		<a class="btn btn-cancel">取消操作</a>
		<div style="clear:both;"></div>
		<script th:src="@{/assets/libs/jquery/1.8.1/jquery.min.js}"></script>
		<script th:src="@{/assets/libs/webuploader/webuploader.min.js}"></script>
		<script>
		var host='[[${host}]]';
		var key="";
		$(function() {
		    if ( !WebUploader.Uploader.support() ) {
		        alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
		        throw new Error( 'WebUploader does not support the browser you are using.' );
		    }
		    WebUploader.Uploader.register({
		        'before-send-file': 'getSign'
		    }, {
		    	getSign: function( file ) {
		            var me = this,
		                deferred = WebUploader.Deferred();
					return $.get("sign").then(function(sign){
						sign.OSSAccessKeyId=sign.accessKeyId;
						var name=file.name;
						sign.key=sign.dir+"/"+(new Date().getTime())+name.substr(name.lastIndexOf("\."));
						delete sign.accessKeyId;
						me.options.formData=sign;
					});
		        }
		    });
		    // 实例化
		    var uploader = WebUploader.create({
		        pick: {
		            id: '#filePicker',
		            //label: '点击选择图片'
		        },
		        accept: {
		            title: 'Images',
		            extensions: 'gif,jpg,jpeg,bmp,png',
		            //mimeTypes: 'image/*'
		            mimeTypes: 'image/jpg,image/jpeg,image/png'//解决谷歌打开文件选择慢的问题
		        },
		        disableGlobalDnd: true,
		        chunked: false,
		        auto:true,
		        server: host,
		        fileNumLimit: 1,
		        fileSizeLimit: 20 * 1024 * 1024,
		        fileSingleSizeLimit: 20 * 1024 * 1024
		    });

		    uploader.onUploadProgress = function( file, percentage ) {
		        var percent = $('.progress span');
		        percent.css( 'width', percentage * 100 + '%' );
		        $(".tips").html("已上传："+percentage * 100 + '%')
		    };

		    uploader.onError = function( code ) {
		    	$(".tips").html("上传出错");
		        uploader.reset();
		    };
		    
		    uploader.onUploadSuccess = function(){
		    	$(".tips").html("上传成功");
		    	key=uploader.options.formData.key;
		    	uploader.reset();
		    };
		    
		    $(".btn-select").click(function(){
		    	if(!parent || !parent.layer)return;
		    	if(!key){
		    		alert("未选择图片");
		    		return;
		    	}
		    	if(parent.imageCallback)parent.imageCallback(key);
		    	var index = parent.layer.getFrameIndex(window.name);
		    	parent.layer.close(index);
		    });
		    
		    $(".btn-cancel").click(function(){
		    	if(!parent || !parent.layer)return;
		    	var index = parent.layer.getFrameIndex(window.name);
		    	parent.layer.close(index);
		    });

		}); 
		</script>
	</body>
</html>